<div class="p-3 bg-white p-3 bg-white">
  <h1 class="h3 m-0">Tabs & accordions</h1>
</div>

<div class="p-3">

  <div class="nav nav-tabs nav-justified">
    <a class="nav-link active"><i class="fa fa-comment fa-2x"></i> Home</a>
    <a class="nav-link"><i class="fa fa-gear fa-2x"></i> Profile</a>
    <a class="nav-link"><i class="fa fa-comments fa-2x"></i> Messages</a>
  </div>

  <div class="clearfix my-4"></div>

  <div class="nav nav-tabs nav-line nav-justified">
    <a class="nav-link active"><i class='fa fa-comment fa-2x'></i> Home</a>
    <a class="nav-link"><i class='fa fa-gear fa-2x'></i> Profile</a>
    <a class="nav-link"><i class='fa fa-comments fa-2x'></i> Messages</a>
  </div>

  <div class="clearfix my-4"></div>

  <div class="nav nav-tabs nav-tabs-triangle">
    <a class="nav-link active"><i class="fa fa-comment"></i> Home</a>
    <a class="nav-link"><i class="fa fa-gear"></i> Profile</a>
    <a class="nav-link"><i class="fa fa-comments"></i> Messages</a>
  </div>

  <div class="clearfix my-4"></div>

  <div class="nav nav-tabs">
    <a class="nav-link active"><i class="fa fa-comment"></i> Home</a>
    <a class="nav-link"><i class="fa fa-gear"></i> Profile</a>
    <a class="nav-link"><i class="fa fa-comments"></i> Messages</a>
  </div>

  <div class="clearfix my-4"></div>

  <div class="nav nav-tabs nav-line">
    <a class="nav-link active"><i class="fa fa-comment"></i> Home</a>
    <a class="nav-link"><i class="fa fa-gear"></i> Profile</a>
    <a class="nav-link"><i class="fa fa-comments"></i> Messages</a>
  </div>

</div>
